<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>垃圾分类查询</title>
<link href="<%=path%>/static/usercss/css/all.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
</head>
<body>
<jsp:include page="/WEB-INF/web/includ/header.jsp"></jsp:include>
<section>
<div class="wrap">
<div class="section">
    <article id="datalist">
      
      <div id="title">
      <h1>收藏的文章</h1>
      <label>分类名称</label>
    </div>
    <datalist>
      <table width="684px" border="0" cellspacing="15" cellpadding="0">
        <tr>
          <th>文章标题</th>
          <th>发布时间</th>
          <th>赞</th>
          <th>评论数</th>
          <th>操作</th>
        </tr>
      <c:forEach items="${requestScope.pageInfo.list }" var="article">  
        <tr id="line">
          <td class="textleft"><a href="<%=path%>/web/article/articleSingle?articleId=${article.id}">${article.title }</a></td>
          <td><fmt:formatDate value="${article.inputTime }" pattern="yyyy/MM/dd"/></td>
          <td>${article.praiseCount }</td>
          <td>${article.commentCount }</td>
          <td><span id="dCollect" style="cursor:pointer;">取消收藏</span><input value="${article.id}" type="hidden"/></td>
        </tr>
       </c:forEach>
       <c:if test="${fn:length(requestScope.pageInfo.list )==0}">
      	<tr></tr>	
       	<tr>	
       		<td></td>
       		<td>您尚未收藏。。。。</td>
       		<td></td>
       		<td></td>
       	</tr>
       </c:if> 
      </table>
    </datalist>
    <div class="pagination ">
      	<a id="first" href="<%=path%>/web/userinfo/myArticleCollect?pageNum=1">« 第一页</a>
    	<a href="<%=path%>/web/userinfo/myArticleCollect?pageNum=${requestScope.pageInfo.pageNum-1}" class="number">« 前一页</a>
    	<c:forEach items="${requestScope.pageInfo.navigatepageNums }" var="page">
			<a style="border:1px solid #ddd" id="page${page }" href="<%=path%>/web/userinfo/myArticleCollect?pageNum=${page}">${page}</a>
		</c:forEach>
   	 	<a href="<%=path%>/web/userinfo/myArticleCollect?pageNum=${requestScope.pageInfo.pageNum+1}" class="number">下一页 »</a>
    	<a href="<%=path%>/web/userinfo/myArticleCollect?pageNum=${requestScope.pageInfo.pages}" class="number">最后 »</a>
    </div>
    </article>
<jsp:include page="/WEB-INF/web/includ/aside.jsp"></jsp:include>  
</div>
</div>
</section>
<jsp:include page="/WEB-INF/web/includ/footer.jsp"></jsp:include>
</body>
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<script src="<%=path%>/static/managecss/lib/layer/2.4/layer.js"></script>
<script type="text/javascript">
$(function(){
	var path = "${pageContext.request.contextPath}";
	
	$("#page${requestScope.pageInfo.pageNum}").css("background-color","#666");
	$("#page${requestScope.pageInfo.pageNum}").css("color","#fff");
	
	$("span[id=dCollect]").click(function(){
		var articleId  = $(this).next().val();
		//alert(articleId);
		$.ajaxSettings.async = false;
		$.post(path+"/web/article/removeCollect",
				{articleId:articleId},
				function(mes){
					$(this).parent().parent().remove();
				}.bind(this));
	});
	
})
</script>



</html>
